<template>
	<view class="">
		<u-navbar :title="title" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="Good_S">
			<view class="bg-image">
				<!-- <img src="../../../static/Frame6.png" mode="widthFix" v-if="service_id == 28">
				
				<image src="../../../static/jiuyipeizhen.jpg" mode="widthFix" v-if="imageType == 1"></image>
				<image src="../../../static/quananfuwu.jpg" mode="widthFix" v-if="imageType == 2"></image>
				<image src="../../../static/jianchayuyue.jpg" mode="widthFix" v-if="imageType == 3"></image>
				<image src="../../../static/jiankangtijian.jpg" mode="widthFix" v-if="imageType == 4"></image> -->
				<!-- <image src="../../../static/daibanpaotui.png" mode="widthFix" ></image> -->
			</view>
			<view v-if="service_id == 28">
				<view class="frame" v-for="(item,index) in cancerList" :key="index" @click="lookcancerdetail(item)">
					<view style="width: 300rpx;">
						<view
							style="width: 300rpx;height: 42rpx; margin: 30rpx 0 0 40rpx;font-size: 32rpx;font-weight: bold;color: #000000;">
							{{item.name}}</view>
						<view
							style="width: 300rpx;height: 42rpx; margin: 10rpx 0 0 40rpx;font-size: 32rpx;color: #C4C4C4;">
							{{item.name_en}}</view>
					</view>
					<image class="right" src="../../../static/right.png"></image>
				</view>
			</view>
			<view v-else>
				<view class="frame" v-for="(item,index) in serviceList" :key="index" @click="lookdetail(item)">
					<image class="right" src="../../../static/right.png"></image>
					<view class="frametwo">
						<view class="banner">
							{{item.name}}
							<view v-if="item.label" class="Hzoy">{{item.label}}</view>
							<view class="peihu">
								<view>
									<image src="../../../static/xuanz.png" mode=""></image>
									<view>就医陪护</view>
								</view>
								<view>
									<image src="../../../static/xuanz.png" mode=""></image>
									<view>专业保障</view>
								</view>
								<view>
									<image src="../../../static/xuanz.png" mode=""></image>
									<view>省时省心</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//医院id
				hospitalId: null,
				//服务列表
				serviceList: [],
				// 癌症列表
				cancerList: [],
				// 传递过来的市id
				city_id: '',
				service_id: '',
				// 自定义导航栏title
				title: '服务类型',
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*有没有等多*/
				no_more: false,
				imageType:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.imageType = options.typeID
			if (options.service_id) {
				this.service_id = options.service_id;
				// 设置导航栏title
				if (this.service_id == 28) {
					this.title = '肿瘤百科';
					this.getCancerList();
				} else {
					this.getServiceList();
				}
			}
		},
		onShow(){
			this.page = 1;
		},
		onReachBottom() {
			let self = this;
			if (self.no_more) {
				return;
			}
			self.page += 1;
			if (self.page <= self.last_page) {
				console.log('到底');
				self.getCancerList();
			} else {
				self.no_more = true;
			}
		},
		methods: {
			// 获取服务列表
			getServiceList() {
				let self = this;
				self.get('/api/Zrecduzp/huoqusuoyoujichufuwu', {
					service_id: self.service_id
				}).then((res) => {
					self.serviceList = res.data;
				})
			},
			// 获取癌症百科
			getCancerList() {
				if (this.page == 1) {
					this.hospitalList = [];
				}
				this.get('/api/Zrecduzp/zhongliubaikeliebiao', {
					page: this.page
				}).then((res) => {
					this.cancerList = this.cancerList.concat(res.data);;
					this.last_page = res.last_page;
					if (res.last_page <= 1) {
						this.no_more = true;
					} else {
						this.no_more = false;
					}
				})
			},
			lookcancerdetail(item){
				if (!uni.getStorageSync('user_id')) {
					uni.switchTab({
						url: "/pages/My/My"
					})
					return
				}
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: `./cancerinfo?item=${data}`
				})
			},
			// 查看详情
			lookdetail(item) {
				if (!uni.getStorageSync('user_id')) {
					uni.switchTab({
						url: "/pages/My/My"
					})
					return
				}
				let Subpageservice = JSON.parse(JSON.stringify(item))
				uni.setStorageSync('Subpage', Subpageservice)
				uni.navigateTo({
					url: `./serviceInfo?service_id=${item.id}`
				})
			}
		}
	}
</script>
<style lang="scss">
	.peihu {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 530rpx;

		view {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #CCC;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}
		}
	}

	.left_T {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		display: inline-block;
	}

	/* 选项栏样式 */
	.bg-image {
		image {
			width: 100%;
			height: 300rpx;
		}
	}

	.right {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		right: 10rpx;
		top: 70rpx;
	}

	.Hzoy {
		display: inline-block;
		margin-top: 10rpx;
		background-image: linear-gradient(#3390d6, #5F5AF7);
		color: #FFFFFF !important;
		font-size: 23rpx !important;
		border-radius: 20%;
		width: 50rpx !important;
		padding: 0 5rpx !important;
		height: 30rpx !important;
		line-height: 30rpx !important;
		margin-left: 10rpx;
	}

	.Qbanner {
		margin-top: 10rpx;
		font-weight: 900;
		height: 50rpx;
		line-height: 50rpx;
		text-align: left;
		display: flex;
		color: #424F5E;

	}

	.framethree {
		position: absolute;
		right: 20rpx;
		color: #B48030;
		font-weight: 800;
		font-size: 25rpx;
		height: 180rpx;
		line-height: 180rpx;
		text-align: right !important;

		text {
			font-size: 35rpx;
		}
	}

	.bannerw {
		font-size: 26rpx !important;
		height: 80rpx;
		width: 230rpx;
		line-height: 30rpx;
		margin-top: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.banner {
		margin-top: 40rpx;
		color: #424F5E;
		font-weight: 900;
		height: 50rpx;
		line-height: 50rpx;
		text-align: left;
		-webkit-line-clamp: 3; //行数需设置
	}

	.frametwo {
		margin-left: 25rpx;
	}

	.frame {
		position: relative;
		display: flex;
		top: -90rpx;
		margin-top: 20rpx;
		height: 180rpx;
		width: 680rpx;
		margin: 0 auto;
		border: 2rpx solid #FFFFFF;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 40rpx;
	}

	.picture {
		width: 70rpx;
		height: 70rpx;
		margin-top: 55rpx;
		margin-left: 20rpx;
	}

	/* 顶部背景图样式 */
	.Upperpart {
		width: 100%;
		height: 450rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #FFFFFF;
		font-size: 50rpx;
		padding-left: 20rpx;
	}
</style>
